import React from 'react'
import Header from '../ui-components/Header'
import './index.css'
import one from './1.png'
import two from './2.png'
import theer from './3.png'
import four from './4.png'
import five from './5.png'
import six from './6.png'
import seven from './7.png'
import eight from './8.png'
import nine from './9.png'
export default function Navigation (props) {
  function confirm (i) {
    switch (i) {
      case 0:
        props.history.push('/diss')
        break
      case 1:
        props.history.push('/navigation')
        break
      case 2:
        props.history.push('/book')
        break
      case 3:
        props.history.push('/member')
        break
      default:
        break
    }
  }
  return (
    <>
      {<Header items={['讨论', '导航', '书柜', '成员', '活动', '发现']} confirm={confirm}></Header>}
      <div className="nav-father">
        <div className="title-field" style={{ fontSize: "5rem" }}>331-Ours'Studio</div>
        <form className="nav-son2" action="http://www.baidu.com/s" method="GET" target="_blank">
          <input type="text" placeholder="百度一下你就知道" name="wd" className="nav-input" />
          <input type="submit" value="搜索" className="nav-search" />
        </form>
        <div className="nav-son3">
          <div className="nav-son3-son">
            <a href="https://www.51cto.com" target="_blank" rel="noopenper noreferrer" style={{ textDecoration: 'none' }} >
              <img className="nav-img" src={one} alt="51CTO" />
              <p className="nav-p">&ensp;51CTO</p>
            </a>
          </div>
          <div className="nav-son3-son">
            <a href="https://www.nowcoder.com" target="_blank" rel="noopenper noreferrer" style={{ textDecoration: 'none' }} >
              <img className="nav-img" src={two} alt="牛客" />
              <p className="nav-p">牛客网</p>
            </a>
          </div>
          <div className="nav-son3-son">
            <a href="https://www.cnblogs.com" target="_blank" rel="noopenper noreferrer" style={{ textDecoration: 'none' }} >
              <img className="nav-img" src={theer} alt="博客园" />
              <p className="nav-p">博客园</p>
            </a>
          </div>
          <div className="nav-son3-son">
            <a href="https://www.oschina.net" target="_blank" rel="noopenper noreferrer" style={{ textDecoration: 'none' }} >
              <img className="nav-img" src={four} alt="开源中国" />
              <p className="nav-p">开源中国</p>
            </a>
          </div>
          <div className="nav-son3-son">
            <a href="https://www.zhihu.com" target="_blank" rel="noopenper noreferrer" style={{ textDecoration: 'none' }} >
              <img className="nav-img" src={five} alt="知网" />
              <p className="nav-p">知&ensp;&ensp;&ensp;网</p>
            </a>
          </div>
          <div className="nav-son3-son">
            <a href="https://gitee.com/" target="_blank" rel="noopenper noreferrer" style={{ textDecoration: 'none' }} >
              <img className="nav-img" src={six} alt="码云" />
              <p className="nav-p">码&ensp;&ensp;&ensp;&ensp;云</p>
            </a>
          </div>
          <div className="nav-son3-son">
            <a href="https://github.com/" target="_blank" rel="noopenper noreferrer" style={{ textDecoration: 'none' }} >
              <img className="nav-img" src={seven} alt="gitHub" />
              <p className="nav-p">git&ensp;&ensp;Hub</p>
            </a>
          </div>
          <div className="nav-son3-son">
            <a href="https://www.bilibili.com/" target="_blank" rel="noopenper noreferrer" style={{ textDecoration: 'none' }} >
              <img className="nav-img" src={eight} alt="b站" />
              <p className="nav-p">b&ensp;&ensp;&ensp;&ensp;&ensp;站</p>
            </a>
          </div>
          <div className="nav-son3-son">
            <a href="https://leetcode-cn.com/" target="_blank" rel="noopenper noreferrer" style={{ textDecoration: 'none' }} >
              <img className="nav-img" src={nine} alt="力扣" />
              <p className="nav-p">LeetCode</p>
            </a>
          </div>
        </div>
      </div>
    </>
  )
}
